import 'dart:math';
import 'dart:ui';

import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
import 'package:xbaistack/common/gen.dart';
import 'package:xbaistack/model/article.dart';
import 'package:xbaistack/service/article_service.dart';
import 'package:xbaistack/widget/gallery_view_page.dart';
import 'package:xbaistack/widget/masonry_list.dart';
import 'package:xbaistack/widget/picture_view_page.dart';
import 'package:xbaistack/widget/refresh_list.dart';

class PubuPage extends StatefulWidget {
  const PubuPage({super.key});

  @override
  State<PubuPage> createState() => _PubuPageState();
}

class _PubuPageState extends State<PubuPage> {
  late final service = ArticleService();
  late final RefreshController<Article> _controller;

  @override
  void initState() {
    super.initState();
    _controller = RefreshController(
      future: (page) {
        return service.selectPageList(page: page, size: 12);
      },
    );
  }

  @override
  void dispose() {
    super.dispose();
    _controller.dispose();

    // service.c();
  }

  @override
  Widget build(BuildContext context) {
    const int column = 2;
    const double spacing = 10;
    final size = MediaQuery.sizeOf(context);
    final boxWidth = (size.width - spacing * (column + 1)) / column;
    return Scaffold(
      appBar: AppBar(title: const Text("测试")),
      body: MasonryList<Article>(
        column: column,
        spacing: spacing,
        controller: _controller,
        builder: (context, index, articles, article) {
          final boxHeight = (boxWidth / article.width) * article.height;
          return GestureDetector(
            onTap: () {
              context
                  .routeOf<GalleryViewPage>()
                  .arguments(
                    GalleryViewPageArguments(
                      articles.map((e) => e.image).toList(),
                      initialIndex: index,
                    ),
                  )
                  .to();
              // context.routeOf<PictureViewPage>().arguments(article.image).to();
            },
            child: Container(
              clipBehavior: Clip.hardEdge,
              decoration: const BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.all(Radius.circular(6)),
              ),
              child: Column(
                mainAxisSize: MainAxisSize.min,
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: [
                  Hero(
                    tag: article.image,
                    child: CachedNetworkImage(
                      imageUrl: article.image,
                      height: boxHeight,
                      fit: BoxFit.cover,
                      errorWidget: (context, url, error) =>
                          const Icon(Icons.error),
                      progressIndicatorBuilder: (context, url, progress) {
                        return Center(
                          child: SizedBox(
                            width: 16,
                            height: 16,
                            child: CircularProgressIndicator(
                              strokeWidth: 3,
                              color: Colors.grey,
                              value: progress.progress,
                            ),
                          ),
                        );
                      },
                    ),
                  ),
                  Padding(
                    padding: const EdgeInsets.symmetric(
                      horizontal: 8,
                      vertical: 5,
                    ),
                    child: Text(
                      article.title,
                      style: const TextStyle(
                        fontSize: 14,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ),
                  Padding(
                    padding: const EdgeInsets.only(
                      left: 8,
                      right: 8,
                      bottom: 8,
                    ),
                    child: Text(
                      article.content,
                      style: const TextStyle(fontSize: 12),
                    ),
                  ),
                ],
              ),
            ),
          );
        },
      ),
    );
  }

  Color _randomColor() {
    return Colors.primaries[Random().nextInt(Colors.primaries.length)];
  }
}
